<template>
	<view class="more">
		<view class="search-view">
			<u-search placeholder="搜索" :disabled="true" :show-action="false" @click="clickSearch" height="37">
			</u-search>
		</view>
		<view class="swiper-view">
			<u-swiper :list="swiperImgArray" :autoplay="true" radius="0" height="232rpx">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in swiperImgArray" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>
		<view class="screen">
			<!-- <view class="screen-bar">
				<view class="sreen-left">
					<view class="comp" @tap="screenCurrent=0" :class="{active: screenCurrent === 0}">
						综合
					</view>
					
					<view class="sales" @tap="screenCurrent=1" :class="{active: screenCurrent === 1}">
						销量
					</view>
				</view>
				
				<view class="filter">
					<view>
						筛选
					</view>
					<image src="" mode=""></image>
				</view>
			</view> -->
			
			<view class="commodity-list">
				<GoodsItem :goodsItem="item" v-for="(item, index) in hotList" :key="item.id" v-if="item"></GoodsItem>
			</view>
		</view>

	</view>
</template>

<script>
	import search from '@/components/search.vue'
	import GoodsItem from '@/components/GoodsItem/GoodsItem.vue'
	import { getSwiper, getGoodsList } from "@/common/api.js"
	
	export default {
		components: {
			search,
		},
		data() {
			return {
				swiperImgArray: [],
				current: 0,
				screenCurrent: 0,
				hotList: null
			}
		},
		methods: {
			clickSearch() {
				uni.navigateTo({
					url:"/pages/search/search"
				})
			},
			//轮播图获取
			async getSwiperImg() {
				const res = await getSwiper({ parentId: 1 });
				if (res.code == 200) {
					res.rows.forEach(e => {
						this.swiperImgArray.push(e.url)
					})
				}
			},
			async initHotList() {
				const res = await getGoodsList({
					pageSize: 1000,
					parentId: 1,
					isHot: 1
				});
				
				this.hotList = res.rows;
				console.log(res);
			}
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("more.title")});
		},
		onLoad() {
			this.initHotList();
			this.getSwiperImg();
		}
	}
</script>

<style scoped lang="scss">
	.swiper-view {
		margin: 14rpx 0px;
		margin-top: 102rpx;
	}

	.item {
		display: flex;
	}
	
	.search-view {
		padding: 14rpx 22rpx;
		position: fixed;
		/* #ifdef APP */
		top: 0;
		/* #endif */
		
		/* #ifdef H5 */
		top: 86rpx;
		/* #endif */
		left: 0;
		right: 0;
		z-index: 1;
		background-color: #fff;
	}
	
	.commodity-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0rpx 10rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box
	}

	.screen-bar {
		width: 100%;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 16rpx 0rpx #0000000C;
		height: 88rpx;
		display: flex;
		align-items: center;
		color: #717184;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 26rpx;
		
		.sreen-left {
			width: 82%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 5rpx solid #858585;
			
			.comp {
				margin-right: 155rpx;
			}
			
			.sales {
				
			}
		}
		
		.filter {
			width: 18%;
			margin-left: 30rpx;
		}
	}
	
	.active {
		color: #FAAD67;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 26rpx;
	}
	
	.screen {
		width: 100%;
		background: #FBFBFB;
		box-shadow: 0px -1px 8px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
	}

	.more {
		padding: 0rpx 24rpx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.indicator {
		@include flex(row);
		justify-content: center;
	
		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;
	
			&--active {
				background-color: #ffffff;
			}
		}
	}
</style>
